min - width

/Internet Explorer			/Netscape		/Opera			/Safari			/Firefox
6.0	7.0	8.0	8.0	9.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Ні	Частково	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так

Коротка інформація

CSS	CSS2
Значення за умовчанням	0
Наслідує	Ні
Застосовується	До усіх елементів, окрім вбудованих і таблиць
Аналог HTML	Ні
Посилання на специфікацію	http://www.w 3.org/TR/CSS21/visudet.html#propdef - min - width

Опис

Встановлює мінімальну ширину елементу. Якщо вікно браузеру по ширині стає менше заданої мінімальної ширини елементу, то ширина елементу залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.

Значення ширини елементу обчислюватиметься залежно від встановлених значень властивостей width, max - width і min - width. У таблиці. 1 показано, чим керується браузер при спільному використанні вказаних стильових властивостей.

Таблиця. 1. Ширина елементу
Значення властивостей					Ширина
min - width	<	width	<	max - width	width
min - width	>	width	>	max - width	min - width
min - width	>	width	<	max - width	min - width
min - width	<	width			width
min - width	>	width			min - width
min - width	>			max - width	min - width
min - width	<			max - width	max - width

Дані з таблиці слід розуміти таким чином. Якщо значення ширини (width) менше значення min - width, то ширина елементу приймається рівною min - width.

Синтаксис

min - width: значення | відсотки | inherit

Значення

Як значення приймаються піксели (px), відсотки (%) і інші одиниці виміри, прийняті в CSS. Негативні значення не допускаються. inherit наслідує значення батька.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

    <title>Колонки без перенесень</title>

    <style  type="text/css">

      #container  {

        min - width: 420px; /* Мінімальна ширина контейнера */

     #col1 {

        background - color: #fc0; /* Колір фону колонки */

        padding: 5px; /* Полів навколо тексту */

        float: left; /* Обтікання по правому краю */

        width: 150px; /* Ширина лівої колонки */

      #col2  {

        background - color: #c0c0c0; /* Колір фону колонки */

        padding: 5px; /* Полів навколо тексту */

        width: 250px; /* Ширина правої колонки */

        float: left; /* Обтікання по правому краю */

    </style>

  </head>

  <body>

    <div id="container">

      <div id="col1">Колонка 1</div>

      <div id="col2">Колонка 2</div>

    </div>

  </body>

</html>

Результат цього прикладу, як він відображається у браузері Opera, показаний на мал. 1. Internet Explorer 6 не підтримує властивість min - width, тому сторінка виглядатиме інакше (мал. 2).

Рис. 1

Мал. 1. Результат використання min - width у браузері Opera

Рис. 2

Мал. 2. Результат використання min - width у браузері Internet Explorer 6

Об'єктна модель

[window.]document.getElementById("elementID").style.minWidth

Браузери

Internet Explorer до сьомої версії включно не підтримує значення inherit.